<template>
    <a-drawer
            title="查看"
            :visible="visible"
            :width="width || '1000px'"
            :confirmLoading="confirmLoading"
            @close="handleCancel"
    >
        <div class="xlSeeFrom">
            <slot name="examine" v-bind="model">

            </slot>
            <div class="xlSeeFrom-view">
                <a-descriptions bordered   :column="2">
                    <a-descriptions-item v-for="(item,index) in formData" :key="index" :label="item.title" :span="item.span">
                        <span v-if="item.type == 'select'">
                            {{typeof item.typeData == 'string'?getSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getSelectData(item.typeData,model[item.dataIndex])}}
                        </span>
                        <span v-else-if="item.type == 'select.multiple'">
                            {{typeof item.typeData == 'string'?getMultipleSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getMultipleSelectData(item.typeData,model[item.dataIndex])}}
                        </span>
                        <span v-else-if="item.type == 'cascader'">
                            {{getCasCaderData(item.typeData,model[item.dataIndex])}}
                        </span>
                        <span v-else-if="item.type == 'radio'">
                            {{typeof item.typeData == 'string'?getSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getSelectData(item.typeData,model[item.dataIndex])}}
                        </span>
                        <span v-else-if="item.type == 'date'">
                            {{getData(model[item.dataIndex],item)}}
                        </span>
                        <span v-else-if="item.type == 'switch'">
                            {{model[item.dataIndex]?model[item.dataIndex]=='是'?'是':'否':'否'}}
                        </span>
                        <span v-else-if="item.type == 'editor'">
                            <div v-html="model[item.dataIndex]">

                            </div>
                        </span>
                        <span v-else-if="item.type == 'dateRange'">
                            {{getRangeData(model[item.typeData.startDate],item)+ '~' + getRangeData(model[item.typeData.endDate],item)}}
                        </span>
                        <span v-else-if="item.type == 'upload'">
                            <xlImages v-model="model[item.dataIndex]" :max="0"></xlImages>
                        </span>
                        <span v-else-if="item.type == 'upload.file'">
                            <xluploadFile v-model="model[item.dataIndex]" :del-visible="false"></xluploadFile>
                        </span>
                        <span v-else-if="item.type == 'input.money'">
                                {{moneyFormat(model[item.dataIndex])}}
                        </span>
                        <xlNameFile
                                v-else-if="item.type=='upload.name'"
                                :disabled="item.disabled"
                                v-model="model[item.dataIndex]"
                                :file-path="item.typeData.filePath"
                                :file-name="item.typeData.fileName"
                                :del-visible="false"
                        >
                        </xlNameFile>
                        <span v-else>
                            {{ model[item.dataIndex]?model[item.dataIndex].toString():'--'}}
                        </span>
                    </a-descriptions-item>
                </a-descriptions>
            </div>
            <div class="drawer-footer">
                <a-button @click="handleOk" type="primary">
                    关闭
                </a-button>
            </div>
        </div>
    </a-drawer>
</template>

<script>
    import moment  from "moment"
    import xluploadFile from '../formUntil/xluploadFile'
    import xlImages from '../formUntil/xlImages'
    import xlNameFile from '../formUntil/xlNameFile'
    export default {
        name: "xlSeeFrom",
        data() {
            return {
                visible: false,
                type: 1,
                formData: [],
                model: {},
                confirmLoading: false,
                tableTitle: '查看'
            }
        },
        props:{
            width:String
        },
        components:{
            xluploadFile,
            xlImages,
            xlNameFile
        },
        created() {

        },
        methods: {
            handleOk() {
                this.confirmLoading = false
                this.visible = false
            },
            formatData(columns,formData) {
                console.log(formData,78)
                this.formData = []
                this.model = formData
                columns.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action"  && item.type && !item.seeVisible) {
                        this.formData.push(item)
                    }else{
                        if(item.children){
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            formatChild(children){
                children.map((item,index)=>{
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type && !item.seeVisible) {
                        this.formData.push(item)
                    }else{
                        if(item.children){
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            handleCancel() {
                //关闭窗口
                this.visible = false
            },
             getSelectData(data,text){
                if(data){
                    const target = data.filter(item => text == item.codeMasterValue)[0]?.codeMasterName || data.filter(item => text == item.dataValue)[0]?.dataName || '--'
                    return target
                }else{
                    return text
                }
            },
            getMultipleSelectData(data,text) {
                if(data) {
                    let target = []
                    text.forEach(item => {
                        target.push(data.filter(i => item == i.codeMasterValue)[0]?.codeMasterName || data.filter(i => item == i.dataValue)[0]?.dataName || '--')
                    })
                    return target.join(',')
                } else {
                    return text
                }
            },
            getCasCaderData(data,text) {
                if (!text) {
                    return '--'
                }
                let arr = data.reduce((op, {value,label,children}) => op.concat([{value,label}], children),[])
                if (data){
                    let target = []
                    JSON.parse(text).forEach(item => {
                        target.push(
                            arr.filter(a => a.value == item)[0].label
                        )
                    })
                    return target.join('/')
                } else {
                    return text
                }
            },
            getData(date,item){
                if(date){
                    if(!item?.typeData){
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if(item.typeData.type == 'date'){
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if(item.typeData == 'dateTime'){
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if(item.typeData == 'month'){
                        return moment(date).format('YYYY-MM')
                    }
                    if(item.typeData == 'year'){
                        return moment(date).format('YYYY')
                    }

                }else{
                    return '--'
                }
            },
            getRangeData(date,item){
                if(date){
                    if(item.typeData.type == 'date'){
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if(item.typeData.type == 'dateTime'){
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if(item.typeData.type == 'month'){
                        return moment(date).format('YYYY-MM')
                    }
                    if(item.typeData.type == 'year'){
                        return moment(date).format('YYYY')
                    }

                }else{
                    return '--'
                }
            },
            moneyFormat(num){
                var reg=/\d{1,3}(?=(\d{3})+$)/g;
                return (num + '').replace(reg, '$&,');
            }
        }
    }
</script>


<style lang="less">
    .ant-drawer-body {
        width: 100%;
        height: calc(100% - 55px);

        .xlSeeFrom {
            width: 100%;
            height: 100%;

            .xlSeeFrom-view{
                width: 100%;
                height: calc(100% - 50px);
                overflow-y: scroll;
                .ant-descriptions-item-label{
                    padding: 16px;
                    word-break: keep-all;
                }
                .ant-card{
                    margin-bottom: 10px;
                }
            }

            .drawer-footer {
                width: 100%;
                height: 50px;
                border-top: 1px solid #e8e8e8;
                border-radius: 0 0 4px 4px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }
    }
</style>
